<template>
	<view class="good-detail">
		<!-- 
		"goodsId": ,
		"userId": ,
		"goodsName": ,
		"goodsImage": ,
		"goodsArticle": ,
		"goodsIntroduce": ,
		"goodsPrice": ,
		"goodsType": ,
		"goodsNumber": -->
		<!-- 主图 -->
		<view class="preview">
			<image :src="good.goodsImage" mode="" class="image"></image>
		</view>

		<!-- 商品简介 -->
		<view class="meta">
			<view class="price">
				<text class="symbol">¥</text>
				<text class="number">{{good.goodsPrice}}</text>
				<text class="unit">{{good.goodsArticle}}</text>
			</view>
			<view class="name ellipsis">{{good.goodsName}}</view>
		</view>
		<!-- 操作面板 -->
		<view class="action">
			<view @tap="openPopup('address')" class="item arrow">
				<text class="label">送至</text>
				<text class="text ellipsis">
					<view class="itemAddress">
						<view class="user">{{address.address_name}} {{address.phone}}</view>
						<view class="address">{{address.address_txt}}</view>
						<text class="icon icon-checked"></text>
					</view>
				</text>
			</view>
			<view @tap="openPopup('service')" class="item arrow">
				<text class="label">服务</text>
				<text class="text ellipsis"> 无忧退 快速退款 免费包邮 </text>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="detail panel">
			<view class="title">
				<text>详情</text>
			</view>
			<view class="content">
				<view class="properties">
					<!-- 属性详情 -->
					<view class="item">
						<text class="label">{{good.goodsIntroduce}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 隐形盒子 -->
		<view class="box">
		</view>

		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>

		<!-- uni-ui 弹出层 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<AddressPanel v-if="popupName === 'address'" @choose_address="change_address" />
			<ServicePanel v-if="popupName === 'service'" />
		</uni-popup>

	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	import AddressPanel from '../components/AddressPanel.vue'
	import ServicePanel from '../components/ServicePanel.vue'

	export default {
		components: {
			AddressPanel,
			ServicePanel
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.address = this.addressList.find((item) => item.isDefault == 1)
			console.log('参数id：' + option.id); //打印出上个页面传递的参数。
			this.goodsid = option.id
			this.get_good_id(this.goodsid)
		},
		data() {
			return {
				//本次送至的地址
				address: {},
				// 本次商品信息id
				goodsid: '',
				// 本次商品信息
				good: {},
				popupName: "",
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
			}
		},
		methods: {
			...mapMutations('user', ['get_user_shopping_cart']),
			//选择地址
			change_address(id) {
				this.address = this.addressList.find((item) => item.address_id == id)

				this.$refs.popup.close()
			},
			//获取点击的商品信息
			get_good_id(id) {
				uni.request({
					url: 'http://localhost:3000/course/goods_id',
					method: 'get',
					data: {
						goodsId: id
					},
					success: (res) => {
						this.good = res.data[0]
						// console.log("res:", this.good)
					},
				});
			},
			// 弹出层
			openPopup(popupName) {
				this.popupName = popupName
				this.$refs.popup.open()
			},
			// 将本次商品加入到对应用户id的购物车后台数据
			transmit_shop_cart(userId) {
				return new Promise((resolve, reject) => {
					// 异步操作
					uni.request({
						url: 'http://localhost:3000/users/shopping_cart',
						method: 'post',
						data: [this.goodsid, userId],
						success: (res) => {
							console.log("加入购物车成功:", res)
							resolve();
						},
						fail() {
							reject();
						}
					});
				})
			},
			//点击底部导航栏   左边：onclick   右边：buttonClick
			onClick(e) {
				console.log(e)
				if (e.index == 0) {
					uni.showToast({
						title: `暂时还未开通客服功能`,
						icon: 'none'
					})
				}
				if (e.index == 1) {
					uni.navigateTo({
						url: "/pages/mall/mall-shopcart/mall-shopcart",
					})
				}
			},
			buttonClick(e) {
				// console.log(e)
				// 点击加入购物车
				if (e.index == 0) {
					this.transmit_shop_cart(this.user.userId).then(() => {
						this.get_user_shopping_cart(this.user.userId)
						uni.showToast({
							title: `加入购物车成功`,
							icon: 'success',
							duration: 500
						})
					})
				}
				if (e.index == 1) {
					let data = [{
						...this.good,
						goodsCount: 1,
					}]
					uni.navigateTo({
						url: `/pages/mall/submit_order/submit_order?order=${JSON.stringify(data)}`
					});
				}
			}
		},
		computed: {
			...mapGetters('user', ['get_user_shopping_cart_length']),
			...mapState('user', ['user', 'user_shopping_cart', 'addressList']),

		},
		watch: {
			user_shopping_cart: function(newVal, oldVal) {
				this.options[1].info = this.get_user_shopping_cart_length
			},
		},
		beforeMount() {
			this.options[1].info = this.get_user_shopping_cart_length
		}
	}
</script>

<style lang="scss" scoped>
	@import "../styles/mall-goods-detail.scss";
</style>